
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span style="font-size:18px;">
<html>
<head>
     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="extinct/css/bootstrap.min.css" />
    <script type="text/javascript" src="extinct/js/jquery.min.js"></script>
    <script type="text/javascript" src="extinct/js/bootstrap.js" ></script>
    <script type="text/javascript" src="extinct/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="extinct/js/overall.js"></script>

    <title>登录</title>

    <style>
        body{
            background: url(extinct/img/logbk.jpg) no-repeat;background-size:cover;
        }
    </style>

</head>

<body>

<div class="container" style="margin-top: 210px;">

    <div class="row">

        <div class="col-md-5 col-md-offset-4">

            <div class="panel panel-default">

                <div class="panel-heading text-center">
                    <h3>耕乐樘管理系统</h3>
                </div>
                <div class="panel-body" >
                    <form action="#">

                        <div style="margin-left: 40px">
                            <div class="form-group" >
                            <div class="form-inline">
                                 <label >账&emsp;号:&ensp;</label>
                                 <input type="text" class="form-control" id="user_name" placeholder="请输入账号" maxlength="11">
                                  <a href="javascript:void(0);" data-toggle="dropdown" data-hover="dropdown"><img onclick="clearName()" src="extinct/img/clear_away.png" width="20px" height="20px"/></a>
                                <span id="uname" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-inline">
                                 <label >密&emsp;码:&ensp;</label>
                                 <input type="password" class="form-control" id="user_password" placeholder="请输入密码" maxlength="16">
                                 <a href="javascript:void(0);" data-toggle="dropdown" data-hover="dropdown"><img id="show_hide" onclick="hideShowPsw()" src="extinct/img/hide_paswd.png" width="20px" height="20px"/></a>
                                <span id="upawd" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                            <div class="form-group">
                            <div class="form-inline">
                                 <label >验证码:&ensp;</label>
                                 <input type="text" placeholder="（不区分大小写）" id="veri_code" style="width: 130px;" class="form-control" maxlength="6">
                                 <a href="javascript:void(0);"><canvas id="canvas" width="100px" height="30px"></canvas></a>
                                <span id="ver_code" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                        <div style="float: left;" class="checkbox">

                            <label>
                                <input type="checkbox" name="remeber">记住密码
                            </label>
                        </div>

                            <div style="float: right; margin-top: 10px; margin-bottom: 10px; margin-right: 50px">
                                <a href="${pageContext.request.contextPath}/forgetPassword" style="color: #0f0f0f">忘记密码？</a>
                            </div>

                        </div>

                        <div style="clear: both;">

                        </div>


                        <button type="button" style="width: 200px; float: left; display: block;" class="btn btn-success btn-lg" onclick="initDate()">登录</button>
                        <button type="button" style="width: 200px; float: right; display: block;" class="btn btn-success btn-lg" onclick="initRegir()">注册</button>

                        <div style="clear: both;">

                        </div>


                        <div style="margin-top: 20px;" class="text-center">
                            <span id="user_messge" style="font-size:10px; color: red;"></span>
                        </div>



                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    //从cookie中读取用户账号和密码
    var names = $.cookie("name");
    var pawds = $.cookie("pawd");

    //当用户的数据未过期时执行自动登录，否则重新登录
    if (names != null && pawds != null){
        $("#user_name").val(names);
        $("#user_password").val(pawds);
        initDate();
    }else if (names != null){
        $("#user_name").val(names);
    }

    //当输入完密码后，敲击回车时执行登录
     $(document).keyup(function(event){
         if(event.keyCode ===13){
             initDate();
         }
     });

    //验证码的显示
    var show_num = [];
    draw(show_num);
    //点击更换验证码
    $("#canvas").on('click',function(){
        draw(show_num);
        $("#ver_code").text("");
    })

    function initRegir(){
        location.href = "${pageContext.request.contextPath}/register";
    }

     function initDate(){
         var uname = $("#user_name").val();
         var upawd = $("#user_password").val();
         var veriCode = $("#veri_code").val();

         if($.isEmptyObject(uname)){
             $("#uname").text("请输入用户名");
             return;
         }else {
             $("#uname").text("");
         }
         if($.isEmptyObject(upawd)){
             $("#upawd").text("请输入密码");
             return;
         }else {
             $("#upawd").text("");
         }


         if (pawds == null){
             if($.isEmptyObject(veriCode)){
                 $("#ver_code").text("验证码为空");
                 return;
             }else {
                 $("#ver_code").text("");
             }

             var num = show_num.join("");
             if(veriCode.toLowerCase() !== num.toLowerCase()){
                 $("#ver_code").text("验证码错误");
                 draw(show_num);
                 return;
             }
         }


         var postUrl = "${pageContext.request.contextPath}/member/userLogin";
         var urlad = "${pageContext.request.contextPath}/admin";
         var urlus = "${pageContext.request.contextPath}/user";

         var str = {
             "userLoginName": uname,
             "userLoginPwd": upawd
         };

         $.ajax({
             type:"post",
             url:postUrl,
             headers: {
                 "Content-Type":"application/json"
             },
             data:JSON.stringify(str),
             contentType: "application/json; charset=utf-8",
             dataType:"json",
             success:function(result){
                 if (result.code === 502){
                     if (result.data === "用户名不存在"){
                         $("#uname").text("用户名不存在");
                     } else if (result.data === "密码错误"){
                         $("#upawd").text("密码错误");
                     }else {
                         $("#user_messge").text(result.data);
                     }
                     draw(show_num);
                 }else {
                     if (names == null){
                         $.cookie("name", uname, { expires: 7, path: "/" });
                     }
                     if (pawds == null){
                         $.cookie("pawd", upawd, { expires: 7, path: "/" });
                     }

                     if(result.data.userLevel === "1"){
                         location.href = urlad;
                     }else if (result.result.userLevel === "2"){
                         location.href = urlus;
                     }
                     sessionStorage.setItem("user",JSON.stringify(result));
                 }

             },
             error:function(xhr,state,errorThrown){
                 //alert("发生网络错误，错误码为：" + xhr.status)
                 location.href = "${pageContext.request.contextPath}/error";
             }
         });
     }

    function hideShowPsw(){
        var type = $("#user_password").attr("type");

        if (type === "password"){
            $("#user_password").attr("type","text");
            $("#show_hide").attr("src","extinct/img/show_paswd.png");
        }else {
            $("#user_password").attr("type","password");
            $("#show_hide").attr("src","extinct/img/hide_paswd.png");
        }
    }

    function clearName(){
        $("#user_name").val("");
    }



</script>

</body>
</html>
</span>